<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大数据联合计算平台DHP架构</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      color: #333;
      min-height: 100vh;
      padding: 20px;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
    }
    
    header {
      text-align: center;
      padding: 20px 0;
      margin-bottom: 30px;
    }
    
    h1 {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 10px;
    }
    
    .subtitle {
      font-size: 1.2rem;
      color: #7f8c8d;
      margin-bottom: 20px;
    }
    
    .platform-description {
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      margin-bottom: 30px;
      line-height: 1.6;
    }
    
    .architecture {
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }
    
    .participant {
      width: 30%;
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      text-align: center;
      position: relative;
    }
    
    .participant h3 {
      margin-bottom: 15px;
      color: #3498db;
    }
    
    .neutral-platform {
      width: 35%;
      background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
      color: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      text-align: center;
    }
    
    .neutral-platform h3 {
      margin-bottom: 15px;
      color: white;
    }
    
    .data-box {
      background: #f8f9fa;
      border: 1px dashed #ddd;
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
      min-height: 100px;
    }
    
    .data-item {
      background: #e3f2fd;
      padding: 8px 12px;
      margin: 5px;
      border-radius: 4px;
      display: inline-block;
    }
    
    .encrypted {
      background: #ffecb3;
    }
    
    .action-btn {
      background: #3498db;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      transition: all 0.3s;
      margin-top: 15px;
    }
    
    .action-btn:hover {
      background: #2980b9;
      transform: translateY(-2px);
    }
    
    .data-flow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20px 0;
    }
    
    .arrow {
      font-size: 24px;
      color: #3498db;
      animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
      0% { opacity: 0.4; }
      50% { opacity: 1; }
      100% { opacity: 0.4; }
    }
    
    .compute-area {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 15px;
      margin: 15px 0;
    }
    
    .compute-result {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 8px;
      padding: 15px;
      margin-top: 15px;
    }
    
    .tabs {
      display: flex;
      margin-bottom: 20px;
      border-bottom: 1px solid #ddd;
    }
    
    .tab {
      padding: 10px 20px;
      cursor: pointer;
      background: #f8f9fa;
      border-radius: 5px 5px 0 0;
      margin-right: 5px;
    }
    
    .tab.active {
      background: #3498db;
      color: white;
    }
    
    .tab-content {
      display: none;
      padding: 20px;
      background: white;
      border-radius: 0 0 5px 5px;
    }
    
    .tab-content.active {
      display: block;
    }
    
    .features {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 30px;
    }
    
    .feature {
      width: 30%;
      background: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    
    .feature h3 {
      color: #3498db;
      margin-bottom: 15px;
    }
    
    .footer {
      text-align: center;
      margin-top: 40px;
      padding: 20px;
      color: #7f8c8d;
    }
    
    @media (max-width: 768px) {
      .participant, .neutral-platform, .feature {
        width: 100%;
        margin-bottom: 20px;
      }
      
      .architecture {
        flex-direction: column;
      }
      
      .data-flow {
        flex-direction: column;
      }
      
      .arrow {
        margin: 10px 0;
        transform: rotate(90deg);
      }
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <header>
      <h1>大数据联合计算平台DHP架构</h1>
      <p class="subtitle">实现数据价值 · 数据不流转 · 安全可信联合计算</p>
    </header>
    
    <div class="platform-description">
      <p>基于DHP的大数据联合计算平台，采用创新、安全、高效的计算模式，促进多方数据可靠融合，推动数据价值安全流转。</p>
      <p>Alice和Bob作为数据提供方，将加密数据上传至中立平台进行计算，原始数据不离开各自区域，计算结果经审核后输出。</p>
    </div>
    
    <div class="tabs">
      <div class="tab" :class="{active: activeTab === 'architecture'}" @click="activeTab = 'architecture'">架构概览</div>
      <div class="tab" :class="{active: activeTab === 'process'}" @click="activeTab = 'process'">计算过程</div>
      <div class="tab" :class="{active: activeTab === 'features'}" @click="activeTab = 'features'">平台特点</div>
    </div>
    
    <div v-show="activeTab === 'architecture'" class="tab-content active">
      <div class="architecture">
        <div class="participant">
          <h3><i class="fas fa-user-circle"></i> 数据提供方Alice</h3>
          <div class="data-box">
            <h4>原始数据</h4>
            <div>
              <span v-for="num in aliceData" :key="'a'+num" class="data-item">{{ num }}</span>
            </div>
          </div>
          <div class="data-box">
            <h4>ZTDO加密数据</h4>
            <div>
              <span class="data-item encrypted">dpdGggY2FshC10...</span>
            </div>
          </div>
          <button class="action-btn" @click="encryptData('alice')">
            <i class="fas fa-lock"></i> 加密数据
          </button>
        </div>
        
        <div class="data-flow">
          <div class="arrow"><i class="fas fa-long-arrow-alt-right"></i></div>
        </div>
        
        <div class="neutral-platform">
          <h3><i class="fas fa-server"></i> 中立计算平台</h3>
          <div class="compute-area">
            <h4>安全计算环境</h4>
            <p>ZTDO数据解密与计算</p>
            <div v-if="computing" class="compute-result">
              <p><i class="fas fa-cog fa-spin"></i> 计算中...</p>
            </div>
            <div v-if="computeResult" class="compute-result">
              <h4>计算结果</h4>
              <p>交集: {{ computeResult }}</p>
            </div>
          </div>
          <button class="action-btn" @click="computeIntersection" :disabled="!bothEncrypted">
            <i class="fas fa-calculator"></i> 计算交集
          </button>
        </div>
        
        <div class="data-flow">
          <div class="arrow"><i class="fas fa-long-arrow-alt-left"></i></div>
        </div>
        
        <div class="participant">
          <h3><i class="fas fa-user-circle"></i> 数据提供方Bob</h3>
          <div class="data-box">
            <h4>原始数据</h4>
            <div>
              <span v-for="num in bobData" :key="'b'+num" class="data-item">{{ num }}</span>
            </div>
          </div>
          <div class="data-box">
            <h4>ZTDO加密数据</h4>
            <div>
              <span v-if="bobEncrypted" class="data-item encrypted">zLC8mZWF0dXJIIGhpZ2h...</span>
              <span v-else>等待加密</span>
            </div>
          </div>
          <button class="action-btn" @click="encryptData('bob')">
            <i class="fas fa-lock"></i> 加密数据
          </button>
        </div>
      </div>
    </div>
    
    <div v-show="activeTab === 'process'" class="tab-content active">
      <div class="process-demo">
        <h2>联合计算流程演示</h2>
        <div class="steps">
          <div class="step">
            <h3><i class="fas fa-lock"></i> 步骤 1: 数据加密</h3>
            <p>数据提供方使用ZTDO技术对原始数据进行加密，确保数据安全。</p>
          </div>
          <div class="step">
            <h3><i class="fas fa-share-alt"></i> 步骤 2: 加密数据上传</h3>
            <p>加密后的数据被上传至中立计算平台的安全环境中。</p>
          </div>
          <div class="step">
            <h3><i class="fas fa-cogs"></i> 步骤 3: 安全计算</h3>
            <p>在中立平台的安全环境中进行数据计算，原始数据不落盘。</p>
          </div>
          <div class="step">
            <h3><i class="fas fa-clipboard-check"></i> 步骤 4: 结果审核</h3>
            <p>计算结果经过审核机制确保合规性，然后输出给授权方。</p>
          </div>
        </div>
      </div>
    </div>
    
    <div v-show="activeTab === 'features'" class="tab-content active">
      <h2>平台核心特点</h2>
      <div class="features">
        <div class="feature">
          <h3><i class="fas fa-ban"></i> 数据不流转</h3>
          <p>原始数据保留在数据提供方本地，仅加密数据或计算中间结果在平台流动。</p>
        </div>
        <div class="feature">
          <h3><i class="fas fa-shield-alt"></i> 安全可信</h3>
          <p>采用ZTDO数据封装技术和可信执行环境(TEE)，确保计算过程安全可靠。</p>
        </div>
        <div class="feature">
          <h3><i class="fas fa-check-circle"></i> 结果可验证</h3>
          <p>计算结果经过多方审核验证，确保输出结果的准确性和合规性。</p>
        </div>
      </div>
    </div>
    
    <div class="footer">
      <p>© 2023 大数据联合计算平台DHP - 模拟演示系统</p>
    </div>
  </div>

  <script>
    const { createApp, ref } = Vue;
    
    createApp({
      setup() {
        const activeTab = ref('architecture');
        const aliceData = ref([1, 3, 5, 7, 11]);
        const bobData = ref([2, 3, 5, 13]);
        const aliceEncrypted = ref(false);
        const bobEncrypted = ref(false);
        const computing = ref(false);
        const computeResult = ref(null);
        
        const bothEncrypted = Vue.computed(() => aliceEncrypted.value && bobEncrypted.value);
        
        function encryptData(party) {
          if (party === 'alice') {
            aliceEncrypted.value = true;
          } else {
            bobEncrypted.value = true;
          }
        }
        
        function computeIntersection() {
          computing.value = true;
          computeResult.value = null;
          
          // 模拟计算延迟
          setTimeout(() => {
            // 实际计算交集
            const result = aliceData.value.filter(value => bobData.value.includes(value));
            computeResult.value = result.join(', ');
            computing.value = false;
          }, 1500);
        }
        
        return {
          activeTab,
          aliceData,
          bobData,
          aliceEncrypted,
          bobEncrypted,
          computing,
          computeResult,
          bothEncrypted,
          encryptData,
          computeIntersection
        };
      }
    }).mount('#app');
  </script>
</body>
</html>